import React from "react";
import Footer from "../common/Footer";

// 封装循环的数据结构
const SwiperItem = React.memo((props) =>
{
    if(props.recommendData.length > 0)
    {
        return (
            <>
                <React.Vant.Swiper>
                    {props.recommendData.map((item) => (
                        <React.Vant.Swiper.Item key={item.id}>
                            <React.Vant.Image lazyload src={item.image_cdn} />
                        </React.Vant.Swiper.Item>
                    ))}
                </React.Vant.Swiper>
            </>
        )
    }else{
        return (
            <>
            </>
        )
    }
});

const Index = () =>
{
    // 上拉加载状态
    const [finished,setFinished] = React.useState(false);
    const [recommendData,setRecommendData] = React.useState([]);
    const [list,setList] = React.useState([]);
    const [listCount,setListCount] = React.useState(0);
    const [page,setPage] = React.useState(1);
    const [limit,setLimit] = React.useState(10);

    // 下拉刷新
    const onRefresh = () =>
    {
        setFinished(false);

        return new Promise((resolve, reject) => {
            setTimeout(async () => {
                await onLoadRefresh(true);

                resolve(true);
            }, 1500);
        })
    }

    // 上拉加载
    const onLoadRefresh = (isRefresh) =>
    {
        
        setFinished(true);
        getCategoryData(isRefresh);
    }

    const getCategoryData = async (isRefresh) =>
    {
        let data = {
            page:isRefresh === true ? 1 : page,
            limit
        }

        let result = await React.Http.POST({
            url:'category/index',
            params:data
        });

        if(result)
        {
            if(result.code === 0)
            {
                React.Vant.Toast.info(result.msg);
                setFinished(true);
                return;
            }

            let count = result.data.count;
            setListCount(count);

            if(isRefresh)
            {
                React.Vant.Toast.info('刷新成功');
                list.length = 0;
            }

            setList((v) => {
                const newList = isRefresh === true ? [] : [...v,...result.data.list];
                
                return newList;
            });

            if(list.length >= count)
            {
                setFinished(true);
                return;
            }

            let Page = isRefresh === true ? 1 : page + 1;

            setPage(Page);
            setFinished(false);
        }
    }

    const Item = () =>
    {
        if(list.length > 0)
        {
            return list.map((item,index) => {
                return (
                    <li key={index}>
                        <React.Router.NavLink to={ '/category/info?id='+item.id }>
                            <img src={item.image_cdn} alt="" />
                            <p>{item.name}</p>
                            <span>2020-03-21</span>
                        </React.Router.NavLink>
                    </li>
                )
            })
        }
    }

    
    const getRecommendData = async () =>
    {
        let result = await React.Http.POST({
            url:'category/recommend',
            params:{}
        });

        if(result)
        {
            if(result.code === 1)
            {
                setRecommendData(result.data);
            }
        }
    }

    React.useEffect(() => {
        getRecommendData();
    },[])
    
    return (
        <>
            <React.Vant.Sticky>
                <React.Vant.NavBar
                    title="学术"
                    leftArrow={<></>}
                />
            </React.Vant.Sticky>

            <div className="banner_shouy">
                <SwiperItem recommendData={recommendData} />
            </div>

            <div className="lest_xs">
                <React.Vant.PullRefresh onRefresh={onRefresh}>
                    {/* List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果 */}
                    <React.Vant.List finished={finished} onLoad={onLoadRefresh}>
                        <ul>
                            <Item />
                        </ul>
                    </React.Vant.List>
                </React.Vant.PullRefresh>
            </div>
            <div style={{height:'.75rem'}}></div>
            <Footer/>
        </>
    )
}

export default Index;